<template>
    <div class="rst-activity">
        <div class="activity-txt">
            <span :style="{background: '#'+ activities[0].icon_color}">{{activities[0].icon_name}}</span>
            <span>{{activities[0].description}}</span>
        </div>
        <div class="activity-count" @click="showSheet = true">
            <span>{{activities.length}}个优惠</span>
            <i class="fa fa-caret-down"></i>
        </div>
        <!-- 优惠弹窗 -->
        <transition name="fade">
            <div class="act-model" v-show="showSheet">
                <div class="activity-sheet">
                    <i @click="showSheet=false" class="fa fa-remove"></i>
                    <h2>优惠活动</h2>
                    <ul>
                        <li v-for="(item,index) in activities" :key="index">
                            <span :style="{background: '#'+ item.icon_color}">{{item.icon_name}}</span>
                            <span>{{item.description}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "Activity",
        data() {
            return {
                showSheet: false
            };
        },
        props:{
            activities:{
                type:Array
            }
        },
    }
</script>


<style scoped>
    .rst-activity {
        display: flex;
        color: #333;
        margin: 3.2vw auto 0;
        align-items: center;
        font-size: 0.8rem;
        width: 80vw;
    }
    .rst-activity .activity-txt {
        flex: 1;
        overflow: hidden;
    }
    .activity-txt span:first-child {
        color: #fff;
        height: 4.466667vw;
        line-height: 3.466667vw;
        font-size: 0.6rem;
        padding: 0.533333vw 1.2vw;
        margin-right: 1.6vw;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 0.266667vw;
    }
    .activity-count {
        width: 16.266667vw;
        flex-shrink: 0;
        padding-right: 2.933333vw;
        text-align: right;
        color: #999;
    }
    .activity-count span {
        margin-right: 1vw;
    }
    .act-model {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }
    .activity-sheet {
        position: absolute;
        background-color: #f5f5f5;
        box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.4);
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 5.333333vw 6.933333vw;
        box-sizing: border-box;
    }
    .activity-sheet h2 {
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 4.133333vw;
    }
    .activity-sheet ul {
        height: 50.8vw;
        overflow-y: scroll;
    }
    .activity-sheet ul li {
        margin-bottom: 3.066667vw;
        display: flex;
        font-size: 0.82rem;
        align-items: center;
    }
    .activity-sheet ul li span:first-child {
        height: 4.266667vw;
        padding: 0.533333vw 1.6vw;
        margin-right: 1.6vw;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 0.266667vw;
        color: #fff;
        white-space: nowrap;
    }
    .activity-sheet ul li span:last-child {
        line-height: 1.38;
        flex: 1;
    }
    .act-model .fa-remove {
        position: absolute;
        font-size: 1.4rem;
        right: 2.666667vw;
        top: 2.666667vw;
        z-index: 1002;
        color: #888;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.25s ease-out;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
</style>
